<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="行高">
                <el-input v-model="propJson.spanStyleLineHeight" style="width: 100%" placeholder="行高" />
            </el-form-item>

            <el-form-item label="字体大小">
                <el-input v-model="propJson.spanStyleFontSize" style="width: 100%" placeholder="字体大小" />
            </el-form-item>

            <el-form-item label="字体类型">
                <el-select v-model="propJson.spanStyleFontFamily" placeholder="字体类型" style="width: 100%">
                    <el-option label="微软雅黑" value="Microsoft YaHei" />
                    <el-option label="微软正黑体" value="Microsoft JhengHei" />
                    <el-option label="宋体" value="SimSun" />
                    <el-option label="楷体" value="KaiTi" />
                    <el-option label="仿宋" value="FangSong" />
                    <el-option label="隶书" value="LiSu" />
                    <el-option label="黑体" value="SimHei" />
                </el-select>
            </el-form-item>

            <el-form-item label="是否垂直居中">
                <el-radio-group v-model="propJson.spanStyleAlignCenter">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否水平居中">
                <el-radio-group v-model="propJson.spanStyleJustifyCenter">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="字体颜色">
                <el-color-picker v-model="propJson.spanStyleFontColor" show-alpha />
            </el-form-item>

            <el-form-item label="是否加粗">
                <el-radio-group v-model="propJson.isBold">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否循环">
                <el-radio-group v-model="propJson.isForEach">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否分行" v-if="propJson.isForEach">
                <el-radio-group v-model="propJson.isBlock">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否开启点击复制">
                <el-radio-group v-model="propJson.isClickCopy">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否触发点击事件">
                <el-radio-group v-model="propJson.isClickAction">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="点击事件类型" v-if="propJson.isClickAction">
                <el-radio-group v-model="propJson.clickActionType">
                    <el-radio label="routeTo">跳转路由</el-radio>
                    <el-radio label="action">触发事件</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider v-if="propJson.isClickAction && propJson.clickActionType === 'action'">设置触发事件</el-divider>
            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="propJson.isClickAction && propJson.clickActionType === 'action'">
                <el-button type="primary" class="addCollapse" size="small" @click="addClickAction()">添加选项修改行为</el-button>
            </div>
            <CommonThirdServiceAction v-if="propJson.isClickAction && propJson.clickActionType === 'action'"
                                     :actionList="propJson.clickActionInfo && propJson.clickActionInfo.actionList ? propJson.clickActionInfo.actionList : []"
                                     :commonParam="commonParam" />

            <CommonClickAction v-if="propJson.isClickAction && propJson.clickActionType === 'routeTo'"
                               :routeToInfo="propJson.clickActionInfo && propJson.clickActionInfo.routeToInfo ? propJson.clickActionInfo.routeToInfo : {}"/>

            <el-divider>文本内容</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.actionInfo ? propJson.actionInfo : {}" :commonParam="commonParam" />
        </el-form>
    </div>
</template>

<script name="SpanDrawer" lang="ts" setup>
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue.vue";
import CommonClickAction from "@/components/lowcode/service/CommonClickAction.vue"
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";
import CommonThirdServiceAction from "@/components/lowcode/service/CommonThirdServiceAction.vue";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

function addClickAction() {
    if (!propJson.value.clickActionInfo.actionList) {
        propJson.value.clickActionInfo.actionList = [{isAsyncAction: false}]
    }
    let variableInfo = {variableName: "", variableValue: "", type: "variable", variableType: "String", variableParamName: "", apiMethod: "GET", responseType: "default", apiType: "MSOA", apiPath: "",
        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
    propJson.value.clickActionInfo.actionList.push(variableInfo)
}

</script>

<style scoped lang="less">
.drawerContainer {
    width: 100%;
}
</style>